<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="http://www.danceui.com/static/iconfont/iconfont.css">
</head>
<body class="page__bg">
<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">折叠面板</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="daui-headline daui-headline_left">
	<div class="daui-headline__text-area">
		<h2 class="daui-headline__title">折叠面板 Collapse</h2>
		<p class="daui-headline__desc">首页就是这个效果,可单独一个使用</p>
	</div>
</div>

<div>
	<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">基本使用</div>
	<div class="daui-collapse J_collapse">
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						魏国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<div class="weui-cell">
					曹魏是三国时期割据政权之一，后世史家多称曹魏，由于之后的北魏被称作“后魏”，故曹魏也称为“前魏”或者“先魏”，是三国之中最强大的国家。
				</div>
			</div>
		</div>
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						蜀国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<div class="weui-cell">
					蜀汉是三国时期割据政权之一。公元221年，刘备在成都称帝，国号汉，史称“蜀汉”，简称“蜀”，亦称“刘蜀”“季汉”。263年为魏所灭。共历二世二帝，国祚四十三年。
				</div>
			</div>
		</div>
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						吴国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<div class="weui-cell">
					吴国是三国时期割据政权之一，是孙权在中国东南部建立的政权，国号为“吴”，史学界称为孙吴。由于与曹魏、蜀汉呈鼎立之势，所统治地区又在三国东部，故也称东吴。
				</div>
			</div>
		</div>
	</div>
	
	<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">无箭头和禁用</div>
	<div class="daui-collapse J_collapse">
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						魏国
					</div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						曹操
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						夏侯惇
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						蜀国
					</div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						刘备
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						黄忠
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
		<div class="daui-collapse__item daui-collapse__item-disabled">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						吴国(禁用状态)
					</div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						周瑜
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						陆逊
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
	</div>
	
	<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">手风琴模式</div>
	<div class="daui-collapse J_collapse" data-collapsemode="2">
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						魏国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						曹操
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						夏侯惇
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						蜀国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						刘备
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						黄忠
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
		<div class="daui-collapse__item">
			<div class="daui-collapse__item__hd">
				<div class="weui-cell weui-cell_access">
					<div class="weui-cell__bd">
						吴国
					</div>
					<div class="weui-cell__ft"></div>
				</div>
			</div>
			<div class="daui-collapse__item__bd">
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						周瑜
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<a class="weui-cell weui-cell_access" href="JavaScript:;">
					<div class="weui-cell__bd">
						陆逊
					</div>
					<div class="weui-cell__ft"></div>
				</a>
			</div>
		</div>
	</div>
</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="http://www.danceui.com/static/plugins/layer/layer.js"></script>

<script>
$(function(){
    $('.J_collapse').on('click', '.daui-collapse__item__hd', function(){
        $collapseParent = $(this).parent().parent('.daui-collapse');
        var collapsemode = $collapseParent.data('collapsemode');
        console.log('collapsemode', collapsemode);
        $parent = $(this).parent('.daui-collapse__item');
        if($parent.hasClass('daui-collapse__item-disabled')){
	        return;
	    }
        if($parent.hasClass('cur')){
	        console.log('关闭状态');
            $parent.removeClass('cur');
        }else{
	        console.log('打开状态');
	        if(collapsemode == 2){
            	$parent.siblings().removeClass('cur');
	        }
            $parent.addClass('cur');
        }
    });
});
</script>
</body>
</html>